<template>
    <div class="document-management">
      <el-input
        v-model="searchQuery"
        placeholder="搜索文档名称"
        style="width: 200px; margin-bottom: 20px;"
        @keyup.enter="handleSearch"
      />
      <el-table :data="documents" style="width: 100%">
        <el-table-column prop="id" label="ID" width="80" />
        <el-table-column prop="name" label="文档名称" />
        <el-table-column prop="path" label="文档路径" />
        <el-table-column prop="url" label="文档URL" />
        <el-table-column prop="source" label="来源">
          <template #default="{ row }">
            <el-tag :type="row.source === 0 ? 'success' : 'info'">
              {{ row.source === 0 ? '本地上传' : '网页' }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="size" label="文档大小" />
        <el-table-column prop="slice_num" label="切片数" />
        <el-table-column prop="slice_status" label="切片状态">
          <template #default="{ row }">
            <el-tag :type="row.slice_status === 1 ? 'success' : 'warning'">
              {{ row.slice_status === 1 ? '已处理' : '未处理' }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="ctime" label="创建时间" />
        <el-table-column label="操作" width="200">
          <template #default="scope">
            <el-button size="small" @click="handleEdit(scope.row)">编辑</el-button>
            <el-button size="small" type="danger" @click="handleDelete(scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
  
      <!-- 分页 -->
      <div class="pagination-container">
        <el-pagination
          v-model:current-page="currentPage"
          v-model:page-size="pageSize"
          :page-sizes="[10, 20, 50, 100]"
          layout="total, sizes, prev, pager, next"
          :total="total"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
      </div>
    </div>
  </template>
  
  <script setup>
  import { ref, defineProps } from 'vue'
  import { ElMessage, ElMessageBox } from 'element-plus'
  import { request } from '../../composables/useCommon'
  
  const props = defineProps({
    knowledgeId: {
      type: String,
      required: true
    }
  })
  
  const documents = ref([])
  const loading = ref(false)
  const searchQuery = ref('')
  const currentPage = ref(1)
  const pageSize = ref(10)
  const total = ref(0)
  
  // 获取文档数据
  const getDocuments = async () => {
    try {
      loading.value = true
      const res = await request('ragDoc/', 'get', {
        pageNo: currentPage.value,
        pageSize: pageSize.value,
        name: searchQuery.value,
        knowledgeId: props.knowledgeId
      })
      documents.value = res.data.records
      total.value = res.data.total
    } catch (err) {
      ElMessage.error('获取文档列表失败')
    } finally {
      loading.value = false
    }
  }
  
  // 搜索文档
  const handleSearch = () => {
    currentPage.value = 1 // 重置为第一页
    getDocuments()
  }
  
  // 分页相关
  const handleSizeChange = (val) => {
    pageSize.value = val
    getDocuments()
  }
  
  const handleCurrentChange = (val) => {
    currentPage.value = val
    getDocuments()
  }
  
  // 编辑文档
  const handleEdit = (row) => {
    // 编辑逻辑
  }
  
  // 删除文档
  const handleDelete = (row) => {
    ElMessageBox.confirm(
      '确认要删除该文档吗？',
      '提示',
      {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      }
    ).then(async () => {
      try {
        await request(`ragDoc/${row.id}`, 'delete')
        ElMessage.success('删除成功')
        getDocuments()
      } catch (err) {
        ElMessage.error('删除失败')
      }
    })
  }
  
  // 初始化数据
  getDocuments()
  </script>
  
  <style scoped>
  .document-management {
    padding: 20px;
  }
  .pagination-container {
    margin-top: 20px;
    display: flex;
    justify-content: flex-end;
  }
  </style>